<template>
  <view class="components-list tn-safe-area-inset-bottom">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>还款计划查询</tn-nav-bar>

    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			  <view class="tn-flex tn-flex-wrap tn-padding-lg">
				  <view class="king-list tn-margin-top-sm">
				    <view class="king-icon">
				      <text class='tn-text-lg tn-margin-left tn-color-black'>还款总额¥{{totalRepay}},</text>
				      <text class='tn-text-lg tn-margin-left tn-color-orange'>利息总额¥{{totalInterest}}</text>
				    </view>
					 <view class='king-item  tn-icon-circle-fill tn-color-grey' v-for="item in plan">
					   <view class="resume text-lg">
						 <text>{{item.repay_date}}</text>
					   </view>
						<view class="tn-flex">
						  <view class="tn-margin-sm tn-padding-top-sm" style="width: 100%;">
							<view class="tn-flex-wrap" >
							  <text class="tn-text-xl tn-text-bold tn-color-black clamp-text-2 tn-text-justify">
								¥{{item.money_interest}}
							  </text>
							  <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
								本金：{{item.money}} 利息：{{item.interest}}
							  </text>
							</view>
						  </view>
						</view>
					 </view>
				  </view>
			  </view>
	</view>
</view>
</template>

<script>
  import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
  import dayjs from '@/util/dayjs.min.js'
  import Decimal from '@/util/decimal.js';
  export default {
    name: 'componentsList',
	mixins: [templatePageMixin],
    data() {
      return {
		totalRepay:0,
		totalInterest:0,
		plan:[],
      }
    },
	onLoad(options) {
		this.initPlan(options)
	},
    watch: {

    },
    methods: {
	  initPlan(model){
		  //repayMethod,dailyRate,loanMonth,loanAmount
	  			  console.log('-----------',model.repayMethod)
	  			  this.plan = []
	  			  this.totalInterest =0 
	  			  this.totalRepay=0
	  			  if(model.repayMethod=='month_interest'){
	  				  let m=0
	  	        const start = dayjs(model.loanStart + 'T12:00:00.000Z')
	  				  let last_start = start
	  				  for(var i=1;i<=Number(model.loanMonth);i++){
	  					  const term_end = start.add(i, 'month')
	  					  const days = term_end.diff(last_start,'day')
	  					  const inter = Decimal.mul(model.loanAmount, model.dailyRate).div(100).mul(days).toFixed(2)
	  					  if(i==Number(model.loanMonth)){
	  						  m=model.loanAmount
	  					  }
	  					  const mi = Decimal.add(m,inter).toFixed(2)
	  					  this.plan.push({
	  	                      'no': i,
	  						  'repay_date':term_end.format('YYYY-MM-DD'),
	  						  'money':m,
	  						  'interest':inter,
	  						  'money_interest':mi
	  					  }) 
	  					  this.totalInterest = Decimal.add(this.totalInterest, inter).toFixed(2)
	  					  last_start = term_end
	  				  }
	  				  this.totalRepay = Decimal.add(model.loanAmount,this.totalInterest).toFixed(2) 
	  			  }
	  	      if(model.repayMethod=='equal_interest'){
	  	        const start = dayjs(model.loanStart + 'T12:00:00.000Z')
	  				  let last_start = start
	  				  // 计算每月固定还款额
	  				  // 月利率按30天计算
	  				  const monthRate = Decimal.div(model.dailyRate,100).mul(30)
	  				  const a = Decimal.mul(monthRate,Decimal.pow(Decimal.add(1,monthRate),model.loanMonth))
	  				  const b = Decimal.pow(Decimal.add(1,monthRate), model.loanMonth).sub(1);
	  				  let monthReapy = Decimal.div(a,b).mul(model.loanAmount).toFixed(2)
	  				  //累计还款本金
	  				  let total = 0
	  				  for(var i=1;i<=Number(model.loanMonth);i++){
	  					  const term_end = start.add(i, 'month')
	  					  const days = 30
	  					  const inter = Decimal.sub(model.loanAmount,total).mul(model.dailyRate).div(100).mul(days).toFixed(2)
	  					  this.plan.push({
							  'no':i,
	  						  'repay_date':term_end.format('YYYY-MM-DD'),
	  						  'money':Decimal.sub(monthReapy,inter),
	  						  'interest':inter,
	  						  'money_interest':monthReapy
	  					  }) 
	  					  total = Decimal.add(total,monthReapy).sub(inter)
	  					  this.totalInterest = Decimal.add(this.totalInterest,inter).toFixed(2)
	  					  last_start = term_end
	  				  }
	  				  this.totalRepay = Decimal.add(model.loanAmount,this.totalInterest)
	  			  }
	  },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
    }
  }
</script>

<style lang="scss" scoped>
  
  .components-list {
    min-height: 100vh;
  }
  
  .custom-title {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10rpx 20rpx;
  }
  
  .list__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list {
    &__left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      
      &__icon, &__image {
        margin-right: 18rpx;
      }
    }
    
    &__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
  
  .message {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    
    &__left {
      width: 10%;
    }
    &__middle {
      width: 80%;
      padding-left: 20rpx;
      padding-right: 40rpx;
    }
    &__right {
      width: 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    &__name {
      font-size: 32rpx;
      margin-bottom: 8rpx;
    }
    &__content {
      font-size: 26rpx;
      color: #838383;
    }
    &__tips {
      &__icon {
        font-size: 36rpx;
        color: #AAAAAA;
      }
    }
  }
  
  /* 简历内容 */
  .king-list {
    display: block;
    // background-color: #ffffff;
  }
  
  .king-list .king-icon {
    width: 100%;
    text-align: left;
    padding: 20rpx 0 20rpx 37rpx;
    font-size: 26rpx;
    color: #888;
    display: block;
  }
  
  .king-list>.king-item {
    padding: 30rpx 30rpx 30rpx 120rpx;
    position: relative;
    display: block;
    z-index: 0;
  }
  
  .king-list>.king-item::after {
    content: "";
    display: block;
    position: absolute;
    width: 1rpx;
    background-color: #E6E6E6;
    left: 60rpx;
    height: 100%;
    top: 0;
    z-index: 8;
  }
  
  .king-list>.king-item::before {
    display: block;
    position: absolute;
    top: 36rpx;
    z-index: 9;
    background-color: #ffffff;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    border: none;
    line-height: 50rpx;
    left: 36rpx;
  } 
  
  .resume {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    border-radius: 6rpx;
    color: #666;
    line-height: 1.6;
  }
  
  .resume+.resume {
    margin-top: 20rpx;
  }
  
  .resume2 {
    padding-top: 10rpx;
    border-radius: 6rpx;
    display: block;
    color: #666;
    line-height: 1.6;
    text-align: justify;
  }
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
</style>
